import { useState } from 'react';
import useRequest from '../../hooks/useRequest';
// import Modal, {ModalInterfaceType} from '../../components/Modal';
import {message} from '../../utils/message';
import { useNavigate } from 'react-router-dom';
import {RegisterResponseType} from './types';
/**
 * 重点：
 * 1、使用TS定义接口返回内容
 */

const Register = ()=>{
    // const modalRef = useRef<ModalInterfaceType>(null);
    const [userName, setUserName] = useState('');
    const [phoneNumber, setPhoneNumber] = useState('');
    const [password, setPassword] = useState('');
    const [checkPassword, setCheckPassword] = useState('');
    const navigate = useNavigate(); // Hook和自定义Hook,一定要写在组件的最外侧，不能写在函数里面
    /**
     * 重点：
     * 1.1、使用泛型传递给useRequest方法
     * 1.2、见utils ->useRequest文件第六行
     */
    // 1.5 接收data, 类型也一定为RegisterResponseType | null
    // const{ data, error, request, cancel } = useRequest<RegisterResponseType>('/a.json', 'GET', {});
    const { request } = useRequest<RegisterResponseType>({manual: true});
    /**
     * 鼠标hover 上面的data 会出现const data: null，这是不对的
     * 因为，如果它是null,那么17行代码，这个判断永远 无法执行，
     * if (null) {console.log(111)}  永远无法打印111
     * 我们其实可以在接口返回数据的时候告诉，这个类型返回的是什么样的
     */
    // 点击注册按钮时的操作
    function handleSubmitBtnClick(){
        if (!userName) {
            message('用户名不得为空')
            // modalRef.current?.showMessage('用户名不得为空')
            return
        }
        if (!phoneNumber) {
            // console.log(111,modalRef)
            message('手机号码不得为空')
            // modalRef.current?.showMessage('手机号码不得为空')
            return
        }
        if (!password) {
            message('密码不能为空')
            // modalRef.current?.showMessage('密码不能为空')
            return
        }
        if (password.length < 6) {
            message('密码至少为6位')
            // modalRef.current?.showMessage('密码至少为6位')
            return
        }
        if (password !== checkPassword) {
            message('两次输入密码不一致')
            // modalRef.current?.showMessage('两次输入密码不一致')
            return
        }
        request({
            url: '/register.json',
            method: 'POST',
            data: { // post请求传data作为参数，get请求params作为参数
              phone: phoneNumber,
              password: password,
              user: userName
            }
        }).then((data)=>{
            data && console.log(data.data)
            if(data?.success){
                navigate('/account/login')
            }
        }).catch((e: any)=>{
            message(e?.message || '未知异常')
            // modalRef.current?.showMessage(e?.message || '未知异常')
        });
        // cancel(); // 取消请求
    }

    return (
        <>
            <div className="form">
                <div className='form-item'>
                    <div className="form-item-title">用户名</div>
                    <input
                        value={userName}
                        className='form-item-content'
                        type="text" 
                        onChange={(e)=>{
                            setUserName(e.target.value)
                        }}
                        placeholder='请输入用户名称' />
                </div>
                <div className='form-item'>
                    <div className="form-item-title">手机号</div>
                    <input
                        value={phoneNumber}
                        className='form-item-content'
                        type="text" 
                        onChange={(e)=>{
                            setPhoneNumber(e.target.value)
                        }}
                        placeholder='请输入手机号' />
                </div>
                <div className='form-item'> 
                    <div className="form-item-title">密码</div>
                    <input
                        value={password}
                        type="password"
                        className='form-item-content'
                        onChange={(e)=>{
                            setPassword(e.target.value)
                        }}
                        placeholder='请输入密码' />
                </div>
                <div className='form-item'> 
                    <div className="form-item-title">确认密码</div>
                    <input
                        value={checkPassword}
                        type="password"
                        className='form-item-content'
                        onChange={(e)=>{
                            setCheckPassword(e.target.value)
                        }}
                        placeholder='请输入确认密码' />
                </div>
            </div>
            <div className="submit" onClick={handleSubmitBtnClick}>注册</div>
             {/* <Modal ref={modalRef} /> */}
        </>
    )
}
export default Register